<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .root {
            position: absolute;
            width: 98%;
            height: 98%;
            display: flex;
            flex-direction: column;
            background-color: black;
        }

        .content-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        {#    background-color: rgba(255, 99, 0, 0.39);#}
        }

        .media-container {
            width: 100%;
            {% if prv_src is not None %}
                height: 90%;
            {% else %}
                height: 100%;
            {% endif %}
            display: flex;
            justify-content: center;
            align-items: center;
            transform-origin: center center; /* 设置旋转基点为容器中心 */
        }

        .media-container.clockwise {
            transform: rotate(90deg); /* 顺时针旋转90度 */
        }

        .media-container.counterclockwise {
            transform: rotate(-90deg); /* 顺时针旋转90度 */
        }

        video,img {
            width: auto; /* 让图片的宽度自适应 */
            height: 100%; /* 让图片的高度自适应 */
            max-width: 100%; /* 设置图片的最大宽度为100% */
            max-height: 100%; /* 设置图片的最大高度为100% */
            object-fit: contain; /* 使用contain适应方式 */
        }

        .cmd-line {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
            display: flex;
            justify-content: space-around;
            background-color: rgba(236, 236, 236, 0.3);
            height: 10%;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="root">
    <div class="content-container">
        <div class="media-container">
            {% if prv_src is not None %}
                <video id="media" width="320" height="240" codecs="avc1.42E01E, mp4a.40.2" autoplay controls loop>
                    <source src="{{ prv_src }}" type="video/mp4">
                </video>
            {% else %}
                <img id="media" src="{{ thumb_src }}">
            {% endif %}
            {#    <span>文件名：{{ filename }}</span>#}
            {#    <span>DLT: {{ dlt }}</span>#}
            {#    <iframe src="//player.bilibili.com/player.html?aid=267790779&bvid=BV1QY411r7Vz&cid=1032598266&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>#}
        </div>
    </div>
    <div class="cmd-line">
        <button onclick="rotateClockwise()">顺时针旋转90度</button>
        <button onclick="rotateCounterclockwise()">逆时针旋转90度</button>
    </div>
</div>
</body>
<script type="text/javascript">
    var rotationAngle = 0;

        function rotateClockwise() {
            rotationAngle += 90;
            applyRotation();
        }

        function rotateCounterclockwise() {
            rotationAngle -= 90;
            applyRotation();
        }

        function applyRotation() {
            var mediaContainer = document.querySelector(".media-container");
            {#var mediaContainer = document.getElementById("media");#}
            console.log("media:",mediaContainer)
            {#var controls = mediaContainer.querySelector('::-webkit-media-controls');#}
            {#console.log("controls:",controls)#}
            mediaContainer.style.transform = `rotate(${rotationAngle}deg)`;
            {#controls.style.transform = `none`;#}
        }
</script>
</html>